
/* -----------------------------------------------
   ------------------ Video Tab ------------------
 __      __ _      _              
 \ \    / /(_)    | |             
  \ \  / /  _   __| |  ___   ___  
   \ \/ /  | | / _` | / _ \ / _ \ 
    \  /   | || (_| ||  __/| (_) |
     \/    |_| \__,_| \___| \___/ 
                                  
                                  
 -----------------------------------------------*/


#tabContentVideo .center > .item {
	text-align: center;
/*	display: table-cell;
	vertical-align: middle;
	width: 930px;*/
	font-size: 15px;
}

#tabContentVideo section {
	padding: 0 10px 10px;
	margin: 0 20px;
	border-bottom: 2px solid #898989;
	position: relative;
}

#tabContentVideo #videoSettings {
	white-space: nowrap;
	display: -webkit-flex;
	-webkit-align-items: baseline;
	-webkit-justify-content: center;
}

#tabContentVideo #videoSettings>span:first-child
{
	-webkit-flex-shrink:0;
}

#tabContentVideo #videoSettings>span.spacer
{
	max-width: 40px;
	-webkit-flex-grow: 1;
}

#tabContentVideo #videoSettings > span {
	display: inline-block;
	margin-top: 15px;
	margin-bottom: 15px;
}
#tabContentVideo #videoSettings > label {
	display: inline-block;
}

#tabContentVideo #videoDisplays {
	border: 0;
}


#tabContentVideo #videoDisplays.noDisplay {
	display:block !important;
	opacity: 0.3;
	-webkit-filter: grayscale(100%);
	        filter: grayscale(100%);
	/* Fixes glitch in webkit on retina displays. See: 
	http://stackoverflow.com/questions/13347947/css-filter-on-retina-display-fuzzy-images*/
	-webkit-transform: translateZ(0);
	pointer-events: none;
}

/* Ensures it can't overlap the play button, whilst remaining centered. */
#tabContentVideo #videoDisplays>div:last-child 
{
	/* 140px is good enough for german and russian. 
	   Maybe not for any language with even longer play button string */
	margin-left: 140px;
	margin-right: 140px;
	white-space: normal;
}

/* Ensures no overlap with the play button at small widths */
@media (max-width: 780px) {
	#tabContentVideo #videoDisplays>div:last-child 
	{
		margin-left: 0px;
		margin-right: 0px;
		margin-bottom: 20px;
	}
}

#tabContentVideo input#video-windowCheckbox[type=checkbox] {
	margin: 6px 0 0 20px;
}

#tabContentVideo .item .selectricWrapper {
	width: auto;
	max-width: 279px;
	-webkit-flex-grow:1;
	top:0px;
}

#tabContentVideo #displaysContainer
{
	/*Hack to ensure span is same size as canvas*/
	font-size:0;
	position:relative;
	overflow: hidden;
	display:block;
	left:-webkit-calc(50% - 450px);
	left:calc(50% - 450px);
	width:900px;
}

#tabContentVideo #displaysCanvas
{
	image-rendering: -webkit-crisp-edges;
}

#tabContentVideo img#displaysImg
{
	position:absolute;
	width:0px;
	left:0px;
}

#resolutionWarningTip::before
{
	content: url('../../images/arrow.png');
	position: absolute;
	bottom: 31px;
	left: 205px;
	z-index: 19;
	-webkit-transform: rotate(180deg);
}

#resolutionWarningTip::after
{
	content: 'x';
	position: absolute;
	top: 4px;
	right: 4px;
	border-radius: 100px;
	background: white;
	color: black;
	height: 5px;
	width: 9px;
	text-align: center;
	line-height: 0;
	padding: 4px 0 0 0;
	border: 1px solid white;
	font-size: 12px;
}

#resolutionWarningTip
{
	position: absolute;
	bottom: -45px;
	left: 0px;
	background: url('../../images/black.png') repeat; 
	color: #eee;
	padding: 10px;
	background-size: auto 100%;
	border-radius: 5px;
	font-size: 13px;
	line-height: 17px;
	z-index: 20;
	text-align: left;
	-webkit-transition: all linear .8s ;
	transition: all linear .8s ;
	opacity: 1;
	text-decoration: none;
	/*FeralUI.css:364*/
	text-shadow: none;
	/*FeralUI.css:1103*/
	opacity: 1;
	z-index: 20;
	pointer-events: auto;
	cursor: pointer;
}

#resolutionWarningTip.off
{
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}